<template>
  <div class="container">
    <section class="topic-detail">
    <div class="topic-head">
      <div class="topic-title">
        {{ topic.title }}
      </div>
      <div class="topic-meta">
                <span class="post-date">
                    {{ dayjs(topic.createTime).format('YYYY/MM/DD HH:mm:ss') }}
                </span>
        <span class="post-author">
                    发布者：{{ topicUser.alias }}
                </span>
        <span class="view-count">
                    查看：{{ topic.view }}
                </span>
      </div>
    </div>
    <div class="topic-content">
      <div id="preview" class="topic-msg">

      </div>

      <div class="topic-tags">
        <router-link
            v-for="(tag, index) in tags"
            :key="index"
            :to="{ name: 'tag', params: { name: tag.name } }"
        >
          <span class="post-tag">
            {{ "#" + tag.name }}
          </span>
        </router-link>
      </div>
    </div>
  </section>
    <aside class="right-side">
      <Author
          v-if="flag"
          :user="topicUser"
      />
      <recommend
          v-if="flag"
          :topic-id="topic.id"
      />
    </aside>

  </div>
</template>

<script>
import { getTopic } from '@/api/post'
import Author from '@/views/post/Author'
import Recommend from '@/views/post/Recommend'
import Vditor from 'vditor'
import 'vditor/dist/index.css'

export default {
  name: 'TopicDetail',
  components: { Author, Recommend },
  data() {
    return {
      flag: false,
      topic: {
        content: '',
        id: this.$route.params.id
      },
      tags: [],
      topicUser: {}
    }
  },
  mounted() {
    this.fetchTopic()
  },
  methods: {
    renderMarkdown(md) {
      Vditor.preview(document.getElementById('preview'), md, {
        hljs: { style: 'github' }
      })
    },
    // 初始化
    async fetchTopic() {
      getTopic(this.$route.params.id).then(response => {
        const { data } = response
        document.title = data.topic.title

        this.topic = data.topic
        this.tags = data.tags
        this.topicUser = data.user
        // this.comments = data.comments
        this.renderMarkdown(this.topic.content)
        this.flag = true
      })
    },
  }
}
</script>

<style scoped>
.container{
  margin: auto;
  margin-top: 64px;
  width: 70%;
  display: flex;
}
.right-side{
  flex: 1;
  margin-left: 2vw;
}
.topic-detail{
  background-color: #fff;
  flex: 4;
  padding: 6px;
  height: 70vh;
}

.topic-head{
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(219, 219, 219, 0.5);
}
.topic-title{
  display: flex;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}
.topic-meta{
  display: flex;
  justify-content: center;
  margin: 6px;
}
.topic-meta span{
  padding: 6px;
}

.topic-content{
  padding: 12px;
  font-size: 14px;
}

@media (max-width: 768px) {
  /*.wrapper .header{*/
  /*  width: 100%;*/
  /*}*/
  .container {
    width: 100%;
    display: block;
    margin: auto;
    margin-top: 64px;
  }

  .right-side{
    margin-top: 5%;
    width: 100%;
  }
}
</style>
